import React, { Suspense } from 'react'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Home from './pages/Home/index'
import QA from './pages/QA/index'
import Video from './pages/Video/index'
import Profile from './pages/Profile/index'
import AuthRoute from './components/AuthRoute'
const Login = React.lazy(() => import('./pages/Login/index.js'))
const Layout = React.lazy(() => import('./pages/Layout/index.js'))
const ProfileEdit = React.lazy(() => import('./pages/Profile/Edit/index.js'))
const ProfileChat = React.lazy(() => import('./pages/Profile/Chat/index.js'))
const ProfileFeedback = React.lazy(() =>
  import('./pages/Profile/FeedBack/index.js')
)

function App() {
  return (
    <Router>
      <div className='App'>
        {/* <Link to='/login'>登录</Link>
        <Link to='/home'>首页 </Link> */}
        <Suspense fallback={<div>loading...</div>}>
          <Routes>
            {/* 自动跳转到layout登录界面 */}
            <Route index element={<Layout />}></Route>
            {/* 登录路由 */}
            <Route path='/login' element={<Login />}></Route>
            {/* 首页路由 */}
            <Route path='/layout' element={<Layout />}>
              <Route index element={<Home />}></Route>
              <Route path='index' element={<Home />}></Route>
              <Route path='question' element={<QA />}></Route>
              <Route path='video' element={<Video />}></Route>
              <Route
                path='profile'
                element={<AuthRoute children={<Profile />}></AuthRoute>}
              ></Route>
            </Route>
            <Route
              path='/profile/edit'
              element={<AuthRoute children={<ProfileEdit />}></AuthRoute>}
            ></Route>
            <Route
              path='/profile/chat'
              element={<AuthRoute children={<ProfileChat />}></AuthRoute>}
            ></Route>
            <Route
              path='/profile/feedback'
              element={<AuthRoute children={<ProfileFeedback />}></AuthRoute>}
            ></Route>
            {/* 404界面 */}
            <Route path='*' element='404 Not Found'></Route>
          </Routes>
        </Suspense>
      </div>
    </Router>
  )
}

export default App
